<template>
  <div id="app">
<div id="login">

    <!-- label为不重要数据 -->
    <!-- ref为此模板中重要的属性 -->

    <!-- model此模板中重要的属性可以进行属性绑定方便后期获取，和v-model没有关系 -->
<!--在饿了么提供的组件中rules和prop需要配合使用 -->
<el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="0" >
         <img src="./logo_index.png" alt="">
      <el-form-item  prop='mobile'>
<!--placeholder可以将内容在input中显示  -->
<!-- prefix是模板中自带的插槽 -->
    <el-input v-model="loginForm.mobile"   placeholder="请输入手机号" >
       <i slot="prefix" class="icon iconfont icon-ziyuanxhdpi
"></i>
    </el-input>

     </el-form-item>
    <el-form-item prop="code" >
      <el-input v-model="loginForm.code" placeholder="请输入密码"  show-password>
         <i slot="prefix" class="icon iconfont icon-icon_password"></i>
      </el-input>
    <!-- <el-input v-model="loginForm.code"  type="password" placeholder="请输入验证码">

    </el-input> -->

  </el-form-item>
  <el-form-item  prop='checked'>
   <el-checkbox v-model="loginForm.checked"  prop="checked" style="margin:10px">
       我已阅读并同意用户协议和隐私条款
       </el-checkbox>
  </el-form-item>
    <el-form-item >
          <el-button type="primary" round style="width:100%;"  :loading="anNiu"  @click="login">登录</el-button>
    </el-form-item>
    </el-form>

</div>
  </div>
</template>

<script>
import '@/assets/js/gt.js'
// 引入淘宝小图标
import '@/assets/font_lzll02805b/iconfont.css'
export default {
  created () {
    this.dianji()
  },

  data () {
    // 自定义协议需要书写到data()之内rteurn之外
    // 必须需要写箭头函数
    // 三个参数第一个为
    var xieyiTest = (rule, value, callback) => {
      // if (value) {
      //   callback()
      // } else {
      //   callback(new Error('请遵守我们的协议'))
      // }
      // 装逼版三元表达式
      value ? callback() : callback(new Error('请遵守我们的协议'))
    }

    return {
      // 获取表单的必须要先定义
    // model 为表单接收数据的对象名称
      loginForm: {
        // mobile手机号码
        mobile: '13911112222',
        code: '246810',
        checked: true

      },
      rules: {
        // 通过prop链接之后进行设置相应的验证规则
        mobile: [
          //
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 5, max: 11, message: '长度在5到11之间', trigger: 'blur' }
        ],
        code: [

          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在3到6之间', trigger: 'blur' }
        ],
        checked: [{
          validator: xieyiTest// 自定义协议关键字
        }
        ]
      },
      anNiu: false,
      ctaObj: null

    }
  },
  methods: {
    login () {
      // // 全部表单域项目校验
      // 获得form表单组件的语句: this.$refs.loginFormRef
      // form组件.validate(回调函数)
      // 参数valid：会体现布尔值，表示校验是否成功
      this.$refs.loginForm.validate((valid) => {
        // 使用axios进行动态数据获取
        // 已经在main页面定义的axios
        if (valid) {
          if (this.ctaObj !== null) {
            return this.ctaObj.verify()
          }
          // 进行按钮的禁用
          this.anNiu = true
          // 进行极验的秘钥信息
          // 在vue的生命周期中create是填充数据最好的时候
          this.$http.get(`/captchas/${this.loginForm.mobile}`)
            .then(result => {
              // console.log(result)
              // 通过对象解析来进行值得获取，主要获取data数据
              let { data } = result.data
              // 来进行参数配置来自服务端的SDK
              // gt，字符串，验证 id，极验后台申请得到
              // challenge，字符串，验证流水号，后服务端 SDK 向极验服务器申请得到
              // offline，布尔，极验API服务器是否宕机（即处于 fallback 状态）
              // newcaptcha，布尔，宕机情况下使用，表示验证是 3.0 还是 2.0，3.0 的 sdk 该字段为 true
              window.initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                // 此处说明没有按钮，通过登录按钮激活
                product: 'bind'

              }, captchaObj => {
                // 准备阶段，准备验证框的生成
                captchaObj.onReady(() => {
                  // 验证码ready之后才能调用verify方法显示验证码
                  // 显示验证码窗口
                  this.ctaObj = captchaObj

                  captchaObj.verify()
                  this.anNiu = false
                })// 成功阶段
                  .onSuccess(() => {
                    this.jianCe()
                  }).onError(() => {

                  })
              })
            }).catch(err => {
              // 如果获取错误将错误信息返回
              return this.$message.error('获得极验初始化的校验信息错误' + err)
            })
        } else {
          alert('请输入完成')
        }
      })
    },
    jianCe () {
      this.$http.post('/authorizations', this.loginForm)
        .then(result => {
          if (result.data.message === 'OK') {
            // 添加session信息从而判断是否为登录状态
            window.sessionStorage.setItem('token', JSON.stringify(result.data.data))
            this.$router.push('/home')
          } else {
            alert('服务器开小差了···请稍后再来')
          }
        })
        .catch(err => {
          return this.$message({ type: 'error', message: '用户名或密码错误:' + err, duration: 1000 })
        })
    },
    dianji () {
      let This = this
      document.onkeypress = function (e) {
      // console.log(e)
        if (e.key === 'Enter') {
          This.login()// 直接调用登陆事件
        }
      }
    }//

  }

}
</script>

<style lang="less" scoped>
#app{
    width: 100%;
    background: url("./login_bg.jpg");
    // 将背景图片铺满盒子
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    #login{
        width: 400px;
        height: 340px;
        background:#ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    img{
        width:60%;
        margin: 20px auto;
    }
    .er-from{
        background: red;
        width: 90%;
    }

    }
}

</style>
